<template>
  <div class="page-header">
    <div class="header-content">
      <h1>&nbsp;&nbsp;航班查询系统</h1>
      <RouterLink to='/personalinfo' class="home-link">个人主页</RouterLink>
    </div>
  </div>
  <div class="flight-search">
    <form>
      <div class="search-row">
        <div class="search-item">
          <label for="bDestination">出发地:</label>
          <select id="bDestination" v-model="FlightDTO.bDestination">
            <option v-for="airport in airports" :key="airport" :value="airport">
              {{ airport }}
            </option>
          </select>
        </div>
        <div class="search-item">
          <label for="eDestination">目的地:</label>
          <select id="eDestination" v-model="FlightDTO.eDestination">
            <option v-for="airport in airports" :key="airport" :value="airport">
              {{ airport }}
            </option>
          </select>
        </div>
        <div class="search-item">
          <label for="bDate"></label>
          <input type="date" id="bDate" v-model="FlightDTO.bDate"/>
        </div>
        <div class="search-item">
          <label for="eDate"></label>
          <input type="date" id="eDate" v-model="FlightDTO.eDate"/>
        </div>
        <div class="search-item">
          <button @click="handleSearch">查询</button>
        </div>
      </div>

    </form>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import { useRouter } from "vue-router";

const FlightDTO = ref({
  bDestination: null,
  eDestination: null,
  bDate: null,
  eDate: null
});

const flights = ref([
  {
    flightNumber: '',
    bDestination: '',
    eDestination: '',
    planeNumber: '',
    date: '',
    OneCount: '',
    TwoCount: '',
    ThreeCount: ''
  }
]);

const airports = ref([
  '北京', '上海', '广州', '深圳', '成都', '杭州', '重庆', '西安', '苏州', '天津',
  '武汉', '长沙', '南京', '青岛', '沈阳', '大连', '宁波', '厦门', '郑州', '东莞',
  '佛山', '济南', '哈尔滨', '合肥', '昆明', '福州', '无锡', '长春', '石家庄', '常州',
  '南昌', '呼和浩特', '贵阳', '南宁', '海口', '兰州', '太原', '乌鲁木齐', '银川', '拉萨','香港'
]);

const errorMessage = reactive('');// 定义并初始化 errorMessage
const router = useRouter();
const handleSearch = async () => {
  console.log('将数据传给航班列表页面');
  //将数据传给航班列表页面
  router.push({
    path: "/flightlist",
    query: FlightDTO.value
  });
};

</script>

<style scoped>
.page-header {
  width: 1340px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  background-color: #454444;
  border-bottom: 1px solid #ccc;
  border-radius: 8px 8px 2px 2px;
  cursor: pointer; /* 添加这一行来改变鼠标悬停时的样式 */
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-link {
  font-size: 16px;
  color: #dddddd;
  text-decoration: none; /* 去除下划线 */
  padding: 5px 15px; /* 增加一些内边距 */
  border-radius: 7px; /* 增加圆角 */
  background-color: #383737; /* 设置背景颜色 */
  cursor: pointer; /* 鼠标悬停时显示小手样式 */
}

.home-link:hover {
  background-color: #4c4b4b; /* 鼠标悬停时的背景颜色 */
}

.page-header h1 {
  margin: 0;
  font-size: 40px;
  color: #dddddd;
}


.flight-search {
  width: 1300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius:2px 2px 8px 8px;
}

.search-row {
  display: flex;
  justify-content: space-evenly; /* 调整为space-around或space-evenly可以更紧凑 */
  align-items: center;
  margin-bottom: 10px;
}

.search-item {
  flex: 0 0 auto; /* 保持选择框的宽度不变 */
  margin-right: 5px; /* 减少margin-right值以拉近选择框的距离 */
}

.search-item:last-child {
  margin-right: 0;
}

.search-item label {
  display: block;
  margin-bottom: 5px;
}

.search-item select,
.search-item input[type="date"] {
  width: 100%; /* 选择框和输入框宽度占满容器宽度 */
  padding: 8px;
}

.search-item button {
  padding: 10px 20px;
  background-color: #4c93af;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-item button:hover {
  background-color: #08668c;
}

.flight-search ul {
  list-style: none;
  padding: 0;
}

.flight-search li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>